<html>
<head id="b">
  <style id="a" type="text/css" media="screen">
    #box {
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-name: anim;
      background-color: blue;
      width: 100px;
      height: 100px;
    }
    @keyframes anim {
        from { transform: rotate(0) scale(1,1); }
        to   { transform: rotate(360deg) scale(2,4); }
    }
  </style>
</head>
<body>
<div id="box">
</div>
<p>This should not crash</p>
</body>
</html>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
var test = async_test("Tests if there is no crash when body is removed and added to a different location.");

var element;

function crash() {
    // trigger style processing
    document.alinkColor = "aaa";
    // now remove the body and insert it in a different location
    element = document.body;
    element.parentNode.removeChild(element);
    document.getElementById("a").parentNode.insertBefore(element, document.getElementById("a").nextSibling);
    test.step_timeout(test.step_func_done(cleanup), 0);
}

function cleanup() {
  document.getElementById("b").parentNode.insertBefore(element, document.getElementById("b").nextSibling);
}

crash();
</script>
